<template>
	<view class="info-view">
		<van-cell-group>
			<van-cell title="头像">
				<img
					@click="openImagePage"
					:src="
						formData.photo
							? formData.photo
							: 'https://img2.baidu.com/it/u=3035872156,255770104&fm=253&fmt=auto&app=138&f=PNG'
					"
					alt=""
				/>
				<van-icon name="arrow" />
			</van-cell>
			<van-cell @click="isInfo" title="昵称">
				<text>{{ formData.userName }}</text>
				<van-icon name="arrow" />
			</van-cell>
			<van-cell @click="isInfo" title="介绍">
				<text>{{ formData.introduce }}</text>
				<van-icon name="arrow" />
			</van-cell>
			<view class="split"></view>
			<van-cell @click="isInfo" title="性别">
				<text>{{ formData.gender }}</text>
				<van-icon name="arrow" />
			</van-cell>
			<van-cell @click="isBirthday" title="生日">
				<text>{{ formData.birthday }}</text>
				<van-icon name="arrow" />
			</van-cell>
		</van-cell-group>
		<van-popup
			position="bottom"
			closeable
			:show="isShow"
			@close="state.isShow = false"
		>
			<view class="title">编辑</view>
			<van-field
				:value="state.formData.userName"
				data-name="userName"
				clearable
				label="昵称"
				@change="handleInput"
				placeholder="请输入昵称"
			/>
			<van-field
				:value="state.formData.introduce"
				data-name="introduce"
				clearable
				label="介绍"
				@change="handleInput"
				placeholder="请输入个性签名"
			/>
			<view class="category">
				<view class="title">性别：</view>
				<van-radio-group
					:value="state.formData.gender"
					@change="selectChage"
				>
					<van-radio name="男">男</van-radio>
					<van-radio name="女">女</van-radio>
					<van-radio name="保密">保密</van-radio>
				</van-radio-group>
			</view>
			<view class="botton">
				<van-button @click="onSubmit" round type="info" size="large"
					>保存</van-button
				>
			</view>
		</van-popup>
		<van-popup position="bottom" @close="state.ishas = false" :show="ishas">
			<van-datetime-picker
				@cancel="cancelBirthday"
				type="date"
				:value="birthday.time"
				:min-date="birthday.minDate"
				:max-date="birthday.maxDate"
				@confirm="onInput"
			/>
		</van-popup>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reactive, toRefs } from 'vue'
import { putUserInfoApi } from '../../api/modules/user.js'
import { UserStore } from '../../store/user.js'
import { userInfoApi } from '@/api/modules/user.js'
const userStore = UserStore()

const state = reactive({
	isShow: false,
	formData: { birthday: '', gender: '保密', time: '' },
	ishas: false
})

const birthday = reactive({
	minHour: 10,
	maxHour: 20,
	maxDate: new Date().getTime(),
	minDate: new Date(2000, 0, 1).getTime(),
	time:  state.formData.time || new Date().getTime()
})

const isInfo = () => {
	state.isShow = true
}

const isBirthday = () => {
	state.ishas = true
}

const cancelBirthday = () => {
	state.ishas = false
}

const onInput = e => {
	const time = e.detail
	let year = new Date(time).getFullYear()
	let month = new Date(time).getMonth() + 1
	let date = new Date(time).getDate()
	state.formData.birthday = `${year}-${month}-${date}`
	onSubmit()
	state.ishas = false
}

const handleInput = e => {
	const value = e.detail
	const { name } = e.target.dataset
	state.formData[name] = value
}

const selectChage = e => {
	state.formData.gender = e.detail
}

const onSubmit = async () => {
	await putUserInfoApi(state.formData)
	uni.$Toast('操作成功')
	state.isShow = false
	userStore.getUserinfo()
}

const openImagePage = e => {
	uni.chooseImage({
		sizeType: 'compressed',
		// 选择图片的数量
		count: 1,
		success: res => {
			const preview = res.tempFilePaths[0]
			wx.uploadFile({
				url: 'http://172.19.10.76:6001/zh/ption/photo', // 仅为示例，非真实的接口地址
				filePath: preview,
				name: 'yy',
				header: { Authorization: 'Bearer ' + uni.getStorageSync('TOKEN') },
				formData: {},
				success(res) {
					init()
				}
			})
		}
	})
}

const init = async () => {
	const { data } =  await userInfoApi()
	state.formData = data
}

// 页面加载
onLoad(message => {
	init()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { isShow, ishas, formData } = toRefs(state)
</script>

<style lang="scss">
page {
	background-color: #f5f7f9;
	height: 100%;
}
.van-datetime-picker {
	margin-top: 60rpx;
}
.category {
	display: flex;
	align-items: center;
	margin-top: 24rpx;
	padding-bottom: 24rpx;
	box-sizing: border-box;
	border-bottom: 1rpx solid #ebedf0;
	.title {
		color: var(--cell-value-color, #969799);
		font-size: 32rpx;
		margin-right: 24rpx;
	}
	.van-radio-group {
		display: flex;
		align-items: center;
		.van-radio {
			margin-left: 24rpx;
		}
	}
}
.title {
	text-align: center;
	padding: 32rpx;
	box-sizing: border-box;
	font-size: 48rpx;
}
.botton {
	text-align: center;
	width: 80%;
	margin: 48rpx auto;
}
.van-cell-group {
	.van-cell__value {
		display: flex;
		justify-content: flex-end;
	}
	image {
		width: 52rpx;
		height: 52rpx;
		border-radius: 26rpx;
	}
	.van-icon {
		margin-left: 10rpx;
		color: #969799;
	}
	.split {
		height: 20rpx;
		background-color: #f5f7f9;
	}
	.van-field__body {
		width: 100%;
	}
}
</style>
